<@>layout("/common/default.html"){
<link rel="stylesheet" href="${ctxPath}/static/zTree3.5/css/demo.css" type="text/css">
<link rel="stylesheet" href="${ctxPath}/static/zTree3.5/css/metroStyle/metroStyle.css" type="text/css">
<script type="text/javascript" src="${ctxPath}/static/zTree3.5/js/jquery.ztree.all.js"></script>
<script type="text/javascript" src="${ctxPath}/static/zTree3.5/js/jquery.ztree.core.js"></script>
<script type="text/javascript" src="${ctxPath}/static/zTree3.5/js/jquery.ztree.excheck.js"></script>
<script type="text/javascript" src="${ctxPath}/static/zTree3.5/js/jquery.ztree.exedit.js"></script>
<style>
    div#menubody {
        padding: 10px;
        line-height: 800px;
        text-align: center;
        background-color: white;
        border: 0px solid silver;
        padding: 3px 20px 3px 3px;
        color: #fff;
    }

    ul#menu-tree {
        margin: 0;
        padding: 8px;
        color: #E9E7E7;
        background-color: white;
        font-size: 17px;
        height: auto;
        width: 100%;
        border: 0px;
        overflow-y: auto;
    }

    li {
        padding: 6px;
    }

    span {
        list-style: none;
        text-align: left;
        white-space: nowrap;
    }

    .ztree * {
        font-size: 15px;
    }
</style>
<div style="padding: 3px" >
<div class="layui-fluid" style="padding: 4px">
    <input type="hidden" name="userId" value="${user.id}" id="userId">
    <div class="pull-right layui-form">
        <div class="layui-inline">
            <input type="text" placeholder="请输入有效时间"  lay-verify="required" name="expireTime" id="expireTime" lay-verify="expireTime"
                   class="layui-input ">
        </div>
        <div class="layui-inline">
            <button type="button" lay-submit="" lay-filter="menutemp" class="layui-btn" >提交</button>
        </div>
    </div>
</div>
<hr>
<div class="layui-fluid" id="treeDiv">
    <div class="layui-row">
        <div class="layui-col-md4">
            <div class="layui-card">
                <div class="layui-card-body" id="menubody">
                    <!--ztree-->
                    <ul id="menu-tree" class="ztree" style="width: 150%"></ul>
                </div>
            </div>
        </div>
    </div>
</div>
  </div>
<script>
    var menuTree;
    var setting = {
        data: {
            simpleData: {
                enable: true,
                idKey: "id",
                pIdKey: "pid"
            },
            key: {
                name: "name"
            }
        },
        check: {
            enable: true,
            chkStyle: "checkbox",
            autoCheckTrigger: true,
            chkboxType: {"Y": "ps", "N": "ps"}
        },
        callback: {
            onClick: function () {
            },
            onRigetClick: function () {
            },
            onExpand: zTreeOnExpand,
            onCollapse:zTreeOnExpand
        }
    };

    $(function () {
        var userId = $('#userId').val();
        $.cajax('${ctxPath}/ajax/userpermission/menu/usermenutemptree', {
            userId: userId
        }, function (r) {
            var code = r.code;
            var msg = r.msg;
            if (code == '1') {
                var menuNodes = r.datas;
                if (menuNodes == null) {
                    $.msg("没有可分配权限", function () {
                    }, 0)
                }
                menuTree = $.fn.zTree.init($("#menu-tree"), setting, menuNodes);
                zTreeOnExpand();
            } else {
                $.msg(msg, function () {
                }, 2);
            }
        });
    })
    layui.use('laydate', function () {
        var laydate = layui.laydate;
        laydate.render({
            elem: '#expireTime',//指定元素
            type: 'datetime',
            zIndex:9898988
        });
    });
    function zTreeOnExpand() {
        var index = parent.layer.getFrameIndex(window.name);
        var treeHeight = $('#treeDiv').height();
        parent.layer.style(index, {
            width: '600px',
            height: treeHeight +200
        });
    };

    layui.use('form', function(){
        var form = layui.form;
        form.on('submit(menutemp)', function(data){
            var userId = $('#userId').val();
            var expireTime = $('#expireTime').val();
            var treeObj = $.fn.zTree.getZTreeObj("menu-tree");
            var checked = treeObj.getCheckedNodes(true);
            var menuIds = "";
            var now = new Date().valueOf();
            var t1 = new Date(expireTime).valueOf();
            if (t1 > now) {
                if (checked.length>0){
                    for (var i = 0; i < checked.length; i++) {
                        var checknode = checked[i];
                        var menuId = checknode.id;
                        if (menuId) {
                            menuIds = menuIds + menuId + ",";
                        }
                    }
                    if (menuIds) {
                        menuIds = menuIds.substring(0, menuIds.length - 1);
                        $.cajax('${ctxPath}/ajax/userpermission/menu/usermenutempsave', {
                            'menuIds': menuIds,
                            'userId': userId,
                            'expireTime': expireTime
                        }, function (r) {
                            var code = r.code;
                            var msg = r.msg;
                            if (code == 1) {
                                $.msg(msg, function () {
                                    var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                                    parent.layer.close(index); //再执行关闭
                                }, code);
                            } else {
                                $.msg(msg, function () {
                                }, 2)
                            }
                        });
                    }
                }else{
                    $.msg("请选择临时权限" ,function () {
                        
                    },2)
                }

            }else{
                $.msg("必须大于当前时间",function () {
                    
                },2)
            }

        });
    });

</script>
<@>}